<template>
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    background-color="#6528e0"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <div class="nav-wrap">
      <el-menu-item index="1">
        
        <a href="http://www.x-zd.com/" class="logo"></a>
      </el-menu-item>
      <el-menu-item>
        <el-input
          class="input"
          @keydown.enter="handleEnter"
          v-model="search"
          placeholder="添加todo"
          :prefix-icon="CirclePlusFilled"
          clearable
        />
      </el-menu-item>
    </div>
  </el-menu>
</template>
  
<script  setup>
import { CirclePlusFilled } from "@element-plus/icons-vue";
import { computed, ref } from "vue";
/* 获取当前城市数据 */
const search = ref("");
const $emit = defineEmits(["handleSearch"]);
const handleEnter = () => {
  $emit("handleSearch", search.value);
  search.value = "";
};
</script>
<style >
.nav-wrap {
  width: 800px;
  margin: 0 auto;
  display: flex;
}
.el-menu-demo {
  align-items: center;
}
.logo {
  display: block;
  width: 100px;
  height: 100%;
  background: url('../assets/logo.png') no-repeat center;
  background-size: 80px;
}
.el-menu-demo .is-active {
  border-bottom-color: transparent !important;
}

.input {
  width: 300px !important;
  height: 40px;
}

.el-menu-demo .el-menu-item:nth-child(2):hover {
  background-color: transparent !important;
}

.icon-ditu_dingwei {
  color: #ff2d51 !important;
  font-size: 20px !important;
}
</style>